<template>
  <div>
    <!--整个首页-->
    <div class="bg_wap_frame ">
      <!--搜索栏--> 
      <infoSearch>  </infoSearch>
      <!--滚动的区域-->
      <div class="scroll_area  imgLazyload">
        <div id="scroll_handle" class="use_gpu">
          <!-- 轮播图 -->
          <indexswiper></indexswiper>
          <!--面板-->
          <div class="pannel_box" id="pannel_wrap"  >
              <div class="custom_box plate_box">
                <div v-if='pannel && pannel && pannel.data.data &&  pannel.data.data.wap_index_banner2 && pannel.data.data.wap_index_banner2.plateContent' >
                  <a href='javascript:;' v-for='itemss in pannel.data.data.wap_index_banner2.plateContent'><img v-bind:src="itemss.image_url" alt=""></a>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <searchBox></searchBox>
  </div>
</template>
<style>
.scroll_area{
  padding-top:1.35rem;
  height: auto!important;
  overflow-y: initial!important;
}
    img {
        width: 100%;
        height: auto;
    }
    
    .flex-box {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
</style>
<script>
    import infoSearch from '../search/default/searchTop.vue'
    import searchBox from '../search/default/searchBox.vue'
    import indexswiper from './default/indexswiper.vue'
    import {
        swiper,
        swiperSlide
    } from 'vue-awesome-swiper'
    export default {
        components: {
            swiper,
            swiperSlide,
            infoSearch,
            searchBox,
            indexswiper,
        },
        data() {
            return {
                msg: 'Hello World!',
                item: null,
                pannel: null,
                selected: true,
                show: false,
                // showsearch: false,
                // searchBoxs: '',
                info: "",
                data: [],
                secondData: [],
            }
        },
        //定义这个sweiper对象  
        computed: {

            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        methods: {
            jumpSearch() {
                location.href = 'http://localhost:8066/#/search'
            },
            iconClose() {
                document.querySelector('.searchbox').style.display = 'none';
                document.querySelector('.bg_wap_frame').style.display = 'block'
            },
            searchBoxs() {
                // bg_wap_frame
                document.querySelector('.bg_wap_frame').style.display = 'none'
                document.querySelector('.searchbox').style.display = 'block';
            },
            //把px转换成rem
            px2rem(px, width, rate) {
                px = parseInt(px);
                width = parseInt(width);
                //默认值是16判断如果有值就覆盖掉
                var rate = rate ? rate : 16;
                Math.round(px / width * rate, 4);
            },
          /**
           * 获取面板盒子nfo {array} 盒子数据
           * @return {string} 转换到re大小样式
           * @param $boxim的宽度和高度
           */
              getBoxSize($boxinfo) {
                $width = parseInt($boxinfo['width']);
                $height = parseInt($boxinfo['height']);
                $bottom = parseInt($boxinfo['foot_distance']);
                $background = $boxinfo['tone'];
                return "width" + px2rem($width, $width) + "rem" + 
                        "height" + px2rem($width, $width) + "rem" +   
                        "padding-bottom" + px2rem($bottom/2, $width) + "rem" +  
                        "margin-bottom" + px2rem($bottom, $width) +"rem" + 
                        "background" + $background 
              // var width = px2rem($width, $width)
              // var height = px2rem($width, $width) 
              // var paddingBottom = px2rem($bottom/2, $width)
              // var marginBottom = px2rem($bottom, $width)
              // var background = $background 
              // return 'width: '.self.px2rem($width, $width)
              // 'rem; height: '.self.px2rem($height, $width)
              // 'rem; padding-bottom: '.self.px2rem($bottom/2, $width)
              // 'rem; margin-bottom: '.self.px2rem($bottom, $width)
              // 'rem; background: '.$background;
              ////“width”+px2rem(xxx)
          }
        },
        mounted: function() {
            //  document.querySelector('.iconClose').onclick=function(){
            //    document.querySelector('.searchbox').style.display='none';
            //    document.querySelector('.bg_wap_frame').style.display='block'
            //  } ;

            this.$http.get("index.php/dvert/getDvertInfo?siteMark=wap_index&ts=1500380387").then(function(data) {
                var items = Function(data.body + ";return adList;")();
                // debugger;
                this.item = items;
                console.log(this.item);
                // 第二种方法
                // this.$http.get('index.php/dvert/getDvertInfo?siteMark=wap_index&ts=1500380387').then((response) => {       
                //  var data = response.data;  
                //     this.data =JSON.parse(data.substr(13));   
                //      }, (response) => {
                //       console.log('error');
            });
            // 第二条数据
            this.$http.jsonp("http://mact.banggo.com/plate/GetPlateContent?_ksTS=1503928461159_72&callback=jsonp73&mark=wap_index&plate_id=418").then(
                function(pannel) {
                    // 这里是处理正确的回调
                    this.pannel = pannel;
                    console.log(this.pannel);
                });
                // function(response) {
                //     // 这里是处理错误的回调
                //     console.log(response)
                // });
        }
    }
</script>